<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>修理</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts-all.js"></script>
		<style>
			.chart1 {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			.chart2{
				height: 350px;
				margin: 0px;
				padding: 0px;
			}

			h5 {
				margin-top: 30px;
				font-weight: bold;
			}

			h5:first-child {
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">数据分析</h1>
		</header>
		<<div class="mui-content">
			<div class="mui-content-padded">
				<h5>时间</h5>
				<div class="chart1" id="lineChart"></div>
				<h5>类别</h5>
				<div class="chart2" id="pieChart"></div>
			</div>
			</div>
	</body>
	<script>
		// var m0=1;var m1=1;var m2=1;var m3=1;
		// var m4=1;var m5=1;var m6=1;var m7=1;
		// var m8=1;var m9=1;var m10=1;var m11=1;//每月报修数目
		var m=new Array(13);
		var c0=0;var c1=0;var c2=0;var c3=0;var c4=0;var c5=0;
		//每个类型报修占比
			function init() {
				//获得数据
				mui.ajax({
					url: 'http://120.27.247.180:8080/School/safeProblem/getYearAndMonth', //url需要放服务器的地址,本地要放电脑的IP
					type: "post",
					async: false,
					data: {},
					dataType: "json",
					contentType: "application/x-www-form-urlencoded; charset=utf-8",
					jsonp: "jsoncallback",
					success: function(data) {
						var date=new Date();
						var mon=date.getMonth()+1;
						// console.log(mon);
						// console.log(data.Year[mon]);
						// for(int i=1;i<=12;i++)
						// {
						// 	m[i]=data.Year[i];
						// }
						// console.log(m);
						m[1]=data.Year[1];
						m[2]=data.Year[2];
						m[3]=data.Year[3];
						m[4]=data.Year[4];
						m[5]=data.Year[5];
						m[6]=data.Year[6];
						m[7]=data.Year[7];
						m[8]=data.Year[8];
						m[9]=data.Year[0];
						m[10]=data.Year[10];
						m[11]=data.Year[11];
						m[12]=data.Year[12];
						// console.log(m1);
						m[mon]=data.Year[0];
						//饼图的绘制 类别分布
						//var pie = data.Month;
						c0= data.Month[0];
						c1= data.Month[1];
					    c3= data.Month[2];
					    c4= data.Month[3];
					    c5= data.Month[4];
						c6= data.Month[5];
					},
					error: function() {
						mui.toast("服务器异常，请稍后再试");
					}
				});
			}
			init();
			
			
		//绘制图像
		var getOption = function(chartType) {
			var chartOption = chartType == 'pie' ? {
				calculable: false,
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: '65%',
					center: ['50%', '50%'],
					data: [{
						value: c0,
						name: '教学楼'
					}, {
						value: c1,
						name: '网络'
					}, {
						value: c2,
						name: '宿舍'
					}, {
						value: c3,
						name: '食堂'
					}, {
						value: c4,
						name: '街道'
					}, {
						value: c5,
						name: '浴室'
					}]
				}]
			} : {
				legend: {
					data: ['报修数目']
				},
				grid: {
					x: 35,
					x2: 10,
					y: 30,
					y2: 25
				},
				toolbox: {
					show: false,
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						magicType: {
							show: true,
							type: ['line', 'bar']
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				calculable: false,
				xAxis: [{
					type: 'category',
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				}],
				yAxis: [{
					type: 'value',
					splitArea: {
						show: true
					}
				}],
				series: [{
					name: '报修数目',
					type: chartType,
					data: [ m[1], m[2], m[3], m[4], m[5], m[6], m[7], m[8], m[9], m[10], m[11],m[12]]
				}]
			};
			return chartOption;
		};
		var byId = function(id) {
			return document.getElementById(id);
		};
		
		var lineChart = echarts.init(byId('lineChart'));
		lineChart.setOption(getOption('line'));
		var pieChart = echarts.init(byId('pieChart'));
		pieChart.setOption(getOption('pie'));
	</script>
</html>
